<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row {
            padding: 0 20px;
        }
        .stars-list {
            position: relative;
        }
        .star {
            position: relative;
            margin:10px 0;
            background: teal;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            border-radius: 5px;
        }
        .star >span.del {
            position: absolute;
            top:10px;
            right:10px;
            color: white;
            font-size: 14px;
            cursor: pointer;
        }
        .star-info {
            color: white;
            font-size: 24px;
        }
        .star-name {
            margin:0 20px;
        }
        .toggleAvatar {
            border:1px dotted #8c8c8c;
            width: 80px;
            height:80px;
            border-radius: 5px;
            font-size: 40px;
            color: grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .toggleAvatar:hover {
            cursor: pointer;
        }
    </style>
    <title>我喜欢的明星</title>
</head>
<body>
<div class="row">
    <div class="col-md-7">
        <div class="jumbotron">
            <h1>Ajax GET</h1>
<pre>
$(document).ready(function () {
  $('.is-ajax-get').click(function () {
    console.log('Ajax开始执行 方法GET')
      $.ajax({
          type: "GET",
          url: "/api/star",
          success: function(res){
          console.log('后端返回数据:', res);
              for (var t=0; t < res.data.length-1; t++) {
                  $('.stars_list').append(
                  '&lt;div class="star" id="star-'+res.data[t].id+'"&gt;&lt;span class="del" data-id="'+res.data[t].id+'"&gt;x&lt;/span&gt;&lt;img src="'+ res.data[t].avatar +'" alt="" class="img-circle" width="80"&gt;&lt;p class="star-info"&gt;'+ '&lt;span class="star-name"&gt;'+res.data[t].name + '&lt;/span&gt;' + res.data[t].hometown +'&lt;/p&gt;&lt;/div&gt;'
              )
          }
      }
  })
})
</pre>
            <p> <button class="btn btn-primary is-ajax-get">获取明星</button>&nbsp;<button class="btn btn-warning reset-stars">清空</button></p>
            <h3>返回结果</h3>

            <pre id="get_result"></pre>
        </div>
    </div>
    <div class="col-md-5">
        <div class="stars-list">
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    // ajax get
    $(document).ready(function () {
        $('.is-ajax-get').click(function () {
            console.log('Ajax开始执行 方法GET')
            $.ajax({
                type: "GET",
                url: "/api/star",
                success: function(res){
                    console.log('后端返回数据:', res);
                    for (var t = 0; t < res.data.length; t++) {
                        $('.stars-list').append(
                                '<div class="star" id="star-'+res.data[t].id+'"><span class="del" data-id="'+res.data[t].id+'">x</span><img src="'+ res.data[t].avatar +'" alt="" class="img-circle" width="60" height="60"><p class="star-info">'+ '<span class="star-name">'+res.data[t].name + '</span>' + res.data[t].hometown +'</p></div>'
                        )
                    }
                    $('#get_result').text(JSON.stringify(res))
                },
                error: function (res) {
                    console.log(res)
                }
            })
        })
        // 清空
        $('.reset-stars').click(function () {
            console.log('清空明星数据')
            $('.stars-list').empty()
        })
        // ajax delete
        $('.stars-list').delegate('.del', 'click', function () {
            console.log('Ajax开始执行 方法POST 异步删除')
            var id = $(this).data('id')
            $.ajax({
                type: "DELETE",
                url: "/api/star/" + id,
                data: {'id': id},
                success: function(res){
                    console.log('后端返回数据:', res)
                    $('#star-'+id).remove()
                },
                error: function (res) {
                    console.log(res)
                }
            })
        })
    })
</script>
</body>
</html>
